import React ,{Component} from 'react';
import ReactDOM from 'react-dom';
import {
    BrowserRouter as Router,
    Route,
    Link
} from 'react-router-dom';
import './../css/index.css';
import Images1 from"./../images/WechatIMG39.jpg";
import Images2 from"./../images/WechatIMG40.jpg";
import Images3 from"./../images/WechatIMG41.jpg";
import { Carousel, WingBlank } from 'antd-mobile';

class Banner extends Component{
    constructor(props){
        super(props);
        this.state = {
            data: ['1', '2', '3'],
            imgHeight: 176,
          }
    
    }
    componentDidMount() {
        // simulate img loading
        setTimeout(() => {
          this.setState({
            data: ['AiyWuByWklrrUDlFignR', 'TekJlZRVCjLFexlOCuWn', 'IJOtIlfsYdTyaDTRVrLI'],
          });
        }, 100);
      }
    render(){
        return(
            <WingBlank>
            <Carousel
              infinite
              autoplay
            >
              {[
                Images1,Images2,Images3
              ].map(val => (
                <a
                  key={val}
                  style={{ display: 'inline-block', width: '100%',height:'260px' }}
                >
                  <img
                    src={val} alt="" style={{ width: '100%', verticalAlign: 'top' }}
                    onLoad={() => {
                      // fire window resize event to change height
                      window.dispatchEvent(new Event('resize'));
                      this.setState({ imgHeight: 'auto' });
                    }}
                  />
                </a>
              ))}
            </Carousel>
          </WingBlank>
          );
        // return <div className='banner-conent'>
        //     aaaa
        // </div>
    }
}
export default Banner;